<template>
	<view class="">
		<view class="search-box">
			<u-search 
				placeholder="门店名称" 
				bgColor="#fff" 
				shape="square" 
				borderColor="#f7f7f7" 
				v-model="searchData.name" 
				@search="onSearch" 
				:showAction="false"/>
			<view class="ml-20 width-240 flex justify-between" v-if="selectType==='2'">
				<u-icon name="arrow-down-fill" color="#e54d42" size="12" :label="searchData.cityName" labelPos="left" @click="showCityPicker = true"></u-icon>
				<uni-icons
					custom-prefix="iconfont" 
					:type="isSelectAll?'icon-checkbox-square-fill':'icon-checkbox-square'" 
					:color="isSelectAll?'#e54d42':'#666'"
					size="30"
					@click="onSelectAll"
				/>
			</view>
		</view>
		<view class="my-list">
			<u-list :height="swiperHeight" @scrolltolower="scrolltolower" v-if="clientList.length > 0">
				<u-list-item v-for="(item, index) in clientList" :key="index">
					<view class="client-list-item" v-if="selectType==='1'">
						<view class="flex align-center w-100" @click="onRadio(item)">
							<!-- <image class="img" :src="item.avatarImage"></image> -->
							<view class="tx">
								<text class>{{item.storeName}}</text>
								<text class="fsize-24 line-gray">{{item.address}}</text>
							</view>
						</view>
					</view>
					<view 
						class="client-list-item flex justify-between align-center mb-10 pt-10 pb-10" 
						v-if="selectType==='2'"
						@click="onStore(index)"
					>
						<text>{{item.storeName}}</text>
						<uni-icons 
							custom-prefix="iconfont" 
							:type="item.selected?'icon-checkbox-square-fill':'icon-checkbox-square'" 
							:color="item.selected?'#e54d42':'#666'"
							size="30"
						>
						</uni-icons>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<!-- 无数据时默认显示 -->
		<view class="emptybox" v-if="clientList.length == 0">
			<u-empty icon-size="150" text="暂无数据" mode="data"></u-empty>
		</view>
		<!-- <view class="bottom-button pt-10">
			<u-button text="确定"  @click="onDetermine" color="#e54d42"></u-button>
		</view> -->
		<u-picker :show="showCityPicker" :columns="citys" keyName="name" @cancel="showCityPicker = false" @confirm="confirmCity"></u-picker>
	</view>
</template>

<script>
	import listHeightMixin from '@/common/computedAltitude.js'
	export default {
		mixins:[listHeightMixin],
		data(){
			return {
				showCityPicker: false,
				clientList: [],
				selectType: '1', // 1  单选 2 多选
				selObj: {
					staffType: '1',
					index: null,
				},
				// isSelectAll: false,
				citys: [],
				total: 1, // 总页数
				searchData: {
					name:'',
					cityId: 0,
					cityName: "全部城市",
					staffId: 0,
					page: 1,
					limit: 20,
				}
			}
		},
		onLoad(opt) {
			if(opt.type){
				this.selectType = opt.type
				if(this.selectType==='2'){
					this.searchData.staffId = opt.staffId
				}
			}
			this.StoreGetPageList()
			this.getStoreCityList()
		},
		computed: {  
		  isSelectAll() {
				if(this.clientList.length === 0){
					return false
				}else {
					return this.clientList.every(item => item.selected === true);
				}
		  }  
		},
		methods: {
			onSelectAll(){
				// this.isSelectAll = !this.isSelectAll
				if(this.isSelectAll){
					this.clientList = this.clientList.map(im=>{
						im.selected = false
						return im
					})
					this.selectedStores()
				}else {
					this.clientList = this.clientList.map(im=>{
						im.selected = true
						return im
					})
					this.selectedStores()
				}
			},
			confirmCity(e){
				this.searchData.cityId = e.value[0].id
				this.searchData.cityName = e.value[0].name
				this.onSearch()
				this.showCityPicker = false
			},
			getStoreCityList(){
				this.$reqPost('GetStoreCity').then(res=>{
					const list = res.data.unshift({id: 0, name: '全部城市'})
					this.citys = [res.data]
				})
			},
			onStore(ix){
				this.clientList[ix].selected = !this.clientList[ix].selected
				this.selectedStores(ix)
			},
			// onSelect(row, ix){
			// 	this.clientList[ix].selected =  !this.clientList[ix].selected
			// },
			selectedStores(ix){
				this.$reqJsonPost('GetStoresDoSetSelected', ix?[this.clientList[ix]]:this.clientList).then(res=>{
					uni.$emit('upList', 4)
				})
			},
			StoreGetPageList(){
				this.$reqPost(this.searchData.staffId!==0?'GetStoresPageList':'StoreGetPageList', this.searchData).then(res=>{
					if(res.count === 0 || res.count <= this.searchData.limit){
						this.total = 1
					}else {
						this.total = res.count%this.searchData.limit==0?(res.count/this.searchData.limit):(Math.floor(res.count/this.searchData.limit)+1);
					}
					this.clientList = [...this.clientList, ...res.data]
				})
			},
			onSearch(){
				this.clientList = []
				this.searchData.page = 1
				this.StoreGetPageList()
			},
			onDetermine(){
				const salers = this.clientList.filter(im=>im.selected)
				const data = {
					index: this.selObj.index,
					salerIds: salers.length > 0?salers.map(im=>im.id).join(','):'',
					salerNames: salers.length > 0?salers.map(im=>im.nickName).join(','):''
				}
				uni.$emit('select-saler', data)
				uni.navigateBack()
			},
			// 选择数据
			onRadio(row){
				let data = {
					id: row.id,
					storeName: row.storeName,
				}
				uni.$emit('select-store', data)
				uni.navigateBack()
			},
			scrolltolower(){
				if(this.searchData.page < this.total){
					this.searchData.page ++
					this.StoreGetPageList()
				} else if (this.searchData.page >= this.total){
					return 
				}
			}
		}
	}
</script>

<style lang='scss' scoped>
	.my-list{
		margin-top: 10rpx;
		padding: 0;
		.client-list-item{
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			background-color: #fff;;
			.img{
				display: block;
				width: 90rpx;
				height: 90rpx;
				border-radius: 50rpx;
				flex-shrink: 0;
				background: url('../../static/logo.png') no-repeat center 0px;
				background-size: 100% 100%;
			}
			.tx{
				width: 100%;
				height: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-bottom: 1px #f7f7f7 solid;
				margin: 0 10rpx 0 20rpx;
				padding: 30rpx 0;
			}
			.icon{
				flex-shrink: 0;
			}
		}
	}
</style>